<template>
    <view class="notice-container">
        <view class="p-absolute px-xs row items-center full-height" style="right: 0; background: #ecf8f1; z-index: 1">
            <!-- <image src="/static/images/index/volume.png" mode="scaleToFill" style="width: 40rpx; height: 40rpx" /> -->
            <u-icon name="bell-fill" size="20" color="#737fcf"/>
        </view>
        <view class="notice" :class="{ rtl: $t('dir') === 'rtl' }">
            <text>{{ text }}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: '',
        },
    },
}
</script>

<style>
.notice-container {
    overflow: hidden;
    width: 100%;
    background-color: #ecf7f8;
    color: #737fcf;
    position: relative;
    border-radius: 12rpx;
}

.notice {
    white-space: nowrap;
    display: inline-block;
    padding: 8rpx 0;
    animation: scroll-left 12s linear infinite; /* 设置固定的动画持续时间 */
    font-size: 30rpx;
}

.notice.rtl {
    animation: scroll-right 12s linear infinite; /* 设置固定的动画持续时间 */
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
</style>